<template>
  <div class="workdate">
      <el-breadcrumb separator="/" class="work_box">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>班次管理</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="box">
          <div class="top">
             班次管理
          </div>
          <div class="btn">
              <el-button type="primary" @click="funa">新增</el-button>
              <!-- <el-button type="info" plain disabled>设为默认</el-button> -->
          </div>
          <div class="bottom">
              <el-table class="my-table"  :data="tableData"  stripe style="width: 100%">
                <!-- <el-table-column type="selection" width="55" align="center"/> -->
                <el-table-column type="index" width="70" label="序号" align="center" style="text-align: center;"/>
                <el-table-column prop="Bcname" width="150" label="班次名称" />
                <el-table-column prop="Bcjian" width="100" label="简称"  align="center"/>
                <el-table-column prop="Bclei" width="100" label="类型" align="center"/>
                <el-table-column prop="Bctime" width="120" label="工作时间" align="center"/>
                <el-table-column prop="BcshiC" width="100" label="应工作时长" align="center"/>
                <el-table-column prop="BCtian"  width="100" label="计出勤天数" align="center"/>
                <el-table-column label="操作"  align="center" >
                    <template #default="scope">
                      <el-button @click="showEditDrawer(scope.row)" type="primary"
                        text= 'primary'>编辑</el-button
                      >
                      <el-button @click="handleDelete(scope.row.id)" type="danger"
                        text= 'danger'>删除</el-button
                      >
                     </template>
                </el-table-column>
              </el-table>
          </div>
          <!-- 弹出框 -->
          <el-dialog v-model="dialogFormVisible" title="编辑班次管理">
              <el-form :model="form">
                <el-form-item label="班次名称" :label-width="formLabelWidth">
                  <el-input v-model="form.Bcname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="简称" :label-width="formLabelWidth">
                  <el-input v-model="form.Bcjian" autocomplete="off" />
                </el-form-item>
                <el-form-item label="班次类型:" >
                  <el-radio-group v-model="form.Bclei">
                    <el-radio label="固定班次" />
                    <el-radio label="弹性班次" />
                    <el-radio label="小时工班次" />
                  </el-radio-group>
               </el-form-item>
                <el-form-item label="工作时间:" style="margin-bottom:10px" prop="region">
              <el-select v-model="form.Bctime" placeholder="请选择时间">
                  <el-option label="09:00-18:00" value="09:00-18:00" />
                  <el-option label="08:00-17:00" value="08:00-17:00" />
                  <el-option label="07:00-16:00" value="07:00-16:00" />
                </el-select>
               </el-form-item>
               <el-form-item label="应工作时长" :label-width="formLabelWidth">
                  <el-input v-model="form.BcshiC" autocomplete="off" />
                </el-form-item>
                <el-form-item label="应工作时长" :label-width="formLabelWidth">
                  <el-input v-model="form.BCtian" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="bianji">
                    编辑
                  </el-button>
                </span>
              </template>
            </el-dialog>
      </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as service from "@/api/lei/lei";
// 路由的引入
import { useRouter } from "vue-router";
var $Router = useRouter()
// 表格中的数据
const tableData = ref([])

// 点击新增跳转至新增页面
var funa= ()=>{
  $Router.push('/index/banci_add')
}

// 发请求(工作日历列表)
onMounted(async()=>{
    var res = await service.BCGL()
    tableData.value=res.data
})
// 删除请求
var handleDelete = async(id)=>{
    var res= await service.BCGL_delete({id})
    console.log(id);
    ElNotification({
                      title: "通知",
                      message: "班次删除成功",
                      type: "success",
                      duration: 2000,
                    });
    var res = await service.BCGL()
    tableData.value=res.data
}

// 编辑
var dialogFormVisible = ref(false)
var form = ref({
  id:'',
  Bcname: '',
  Bcjian: '',
  Bclei:'',
  Bctime:'',
  BcshiC:'',
  BCtian:'',
  type: [],
})
// 点击编辑
var showEditDrawer = (admin)=>{
  dialogFormVisible.value=true
  form.value.Bcname=admin.Bcname
  form.value.Bcjian=admin.Bcjian
  form.value.Bclei=admin.Bclei
  form.value.Bctime=admin.Bctime
  form.value.BcshiC=admin.BcshiC
  form.value.BCtian=admin.BCtian
  form.value.id=admin.id
}
// 班次管理列表的编辑
var bianji = async()=>{
  var res =await service.BCGL_update(form.value)
  dialogFormVisible.value=false
  ElNotification({
                      title: "通知",
                      message: "编辑成功",
                      type: "success",
                      duration: 2000,
                    });
  // 更新数据库
  var res = await service.BCGL()
  tableData.value=res.data
}
</script>

<style scoped lang='scss'>
.workdate{
  .work_box{
    padding: 10px 15px;
    font-size: 14px;
  }
  .box{
    width: 1100px;
    height: 500px;
    box-sizing: border-box;
    background-color: white;
    .top{
      width: 100%;
      box-sizing: border-box;
      font-size: 16px;
      border-bottom: 1px solid #f5f5f5;
      padding:  10px 15px;
      font-weight: bold;
    }
    .btn{
      box-sizing: border-box;
      padding: 10px 15px;
    }
    .bottom{
      padding: 10px 15px;
      /* 圆形勾选框 */
      :deep(.el-checkbox__inner) {
        border-radius: 50%;
      }


    }
  }
}
</style>